<template>
  <div class="quote-price-container">
    <searchBox>
      <template #yyxbread>
        <div style="display: flex; align-items: center">
          <el-icon>
            <Location />
          </el-icon>
          <span class="f12 ml10 mr10">当前位置：</span>
          <el-breadcrumb separator="/" class="f14">
            <el-breadcrumb-item class="active" style="color: #1d2129; font-weight: bold">预算报价/套餐详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
    </searchBox>
    <div class="content">
      <el-container>
        <el-aside width="220px">
          <el-scrollbar class="aside-box">
            <div class="t text-break">{{ packageDetail.bundleName || "-" }}</div>
            <div class="list">
              <div
                :class="currentSpace.spaceId == v.spaceId ? 'item on' : 'item'"
                v-for="(v, i) in packageDetail.spaceList"
                :key="i"
                @click="clickClassify(v)"
              >
                {{ v.spaceName }}
              </div>
            </div>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-main ref="preselection">
            <el-scrollbar style="height: 80px">
              <div class="search-box">
                <div class="search-list">
                  <div
                    :class="currentQuota == v ? 'li active_li' : 'li'"
                    v-for="(v, i) in currentSpace.quotaList"
                    :key="i"
                    @click="clickcurrentQuota(v)"
                  >
                    <div class="t">
                      {{ v.quotaName.substring(0, 6) }}
                      <el-tooltip :content="v.quotaName" v-if="v.quotaName.length > 6"> ... </el-tooltip>
                      (已选：{{ v.qiantotle }})
                    </div>
                  </div>

                  <!-- 个性化材料 -->
                  <div
                    :class="currentQuota?.tabsType === 'DTO' ? 'li active_li' : 'li'"
                    @click="clickcurrentQuota(currentSpace?.spaceQuotationMaterialDTO, 'DTO')"
                  >
                    <div class="t">
                      个性化材料(已选：{{ currentSpace?.spaceQuotationMaterialDTO?.productInfos?.length || 0 }})
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
            <div class="container">
              <div class="left">
                <div
                  v-for="(type, index) in showzhufu"
                  :key="index"
                  @click="quotaTypechange(type)"
                  :class="{ leftitem: quotaType === type, unleftitem: quotaType !== type }"
                >
                  <div :class="{ text: quotaType === type, untext: quotaType !== type }">
                    {{ type === "1" ? "主材" : "辅材" }}
                  </div>
                </div>
              </div>
              <div class="right" v-if="!currentQuota.tabsType">
                <div class="rightzuo jzt-pf-bold" v-if="showcaozuo">
                  共<span style="color: #4e5969">{{ mianList.length || auxiliaryList.length }}</span
                  >款可选<span style="color: #4e5969">{{
                    quotaType == 1 ? currentQuota?.mainProductCheckedNum : currentQuota?.auxiliaryProductCheckedNum
                  }}</span
                  >/已选：<span style="color: #4e5969">{{ quotaType === "1" ? getmainlisttotle() : getauxiliarytotle() }}</span>
                </div>

                <div v-if="!showcaozuo" class="rightzuo jzt-pf-bold">
                  共<span style="color: #4e5969">{{ mianList.length || auxiliaryList.length }}</span
                  >款可选<span style="color: #4e5969">{{ auxiliaryNum }}</span
                  >/已选：<span style="color: #4e5969">{{ quotaType === "1" ? getmainlisttotle() : getauxiliarytotle() }}</span>
                </div>
                <div class="rightyou" v-if="mianList.length == 0">
                  <div class="text" @click="tagFilterFlag = true">展开标签筛选</div>
                  <img :src="require('@/assets/images/rongqi.png')" class="img" width="16" />
                </div>
              </div>
            </div>

            <!-- 固定商品 -->
            <div v-if="mianList.length !== 0">
              <div
                class="card"
                v-for="(v, i) in mianList"
                :key="i"
                @click="changetab(v, currentQuota?.tabsType ? 'checked' : 'toggle')"
              >
                <div class="picture">
                  <img :src="v.mainPicUrl" height="200" />
                </div>
                <div class="card-right">
                  <div class="top">
                    <div class="title text-over f18 jzt-shs-bold">{{ v.productAliasName }}</div>
                    <div class="iconclick">
                      <img :src="require('@/assets/images/unselect.png')" width="24" v-if="isChecked(v)" />
                      <img :src="require('@/assets/images/select.png')" width="24" v-else />
                    </div>
                  </div>
                  <div class="center">
                    <div class="content">
                      <div class="content_item">
                        <div class="text text-over" :title="v.skuSpecification" style="max-width: 200px">
                          规格:{{ v.skuSpecification }}
                        </div>
                        <div class="text">SKU编码：{{ v.skuCode }}</div>
                        <div class="text">ID：{{ v.productId }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="remark">
                    <!-- <div @click="openMarqueSelect(v)">备注:{{ v.remark ? v.remark.replace(/<\/?p>/g, "") : "" }}</div> -->
                    <div @click.stop="openMarqueSelect(v)" class="jzt-flex-center">
                      <span>备注:</span>
                      <RemarkEditor v-model="v.remark" :title="'修改备注'" :isEdit="false" />
                    </div>
                  </div>
                  <div class="down">
                    <div class="downleft" v-if="packageDetail.isHidePrice === 1">￥{{ v.clinetRealPrice }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 条件组合 -->
            <div v-else-if="auxiliaryList.length !== 0">
              <div
                class="card"
                v-for="(v, i) in auxiliaryList"
                :key="i"
                @click="changetab(v, currentQuota?.tabsType ? 'checked' : 'toggle')"
              >
                <div class="picture">
                  <img :src="v.mainPicUrl" height="200" />
                </div>
                <div class="card-right">
                  <div class="top">
                    <div class="title">{{ v.productName }}</div>
                    <div class="iconclick">
                      <img :src="require('@/assets/images/unselect.png')" width="24" v-if="isChecked(v)" />
                      <img :src="require('@/assets/images/select.png')" width="24" v-else />
                    </div>
                  </div>
                  <div class="center">
                    <div class="content">
                      <div class="content_item">
                        <div class="text text-over" :title="v.skuSpecification" style="max-width: 200px">
                          规格:{{ v.skuSpecification || "" }}
                        </div>
                        <div class="text">SKU编码：{{ v.businessSkuId || "" }}</div>
                        <div class="text">ID：{{ v.productId }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="remark">
                    <!-- <div>备注:{{ v.remark ? v.remark.replace(/<\/?p>/g, "") : "" }}</div> -->
                    <div class="jzt-flex-center">
                      <span>备注:</span>
                      <RemarkEditor v-model="v.remark" :title="'修改备注'" :isEdit="false" />
                    </div>
                  </div>
                  <div class="down">
                    <div class="downleft" v-if="packageDetail.isHidePrice === 1">
                      ￥{{ v.businessLowestPrice || v.clinetRealPrice }}
                    </div>
                    <div v-else></div>
                    <div class="downright" v-if="currentQuota?.tabsType !== 'DTO'" @click.stop="openMarqueSelect(v)">
                      <div class="text">选择商品规格</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-empty v-else description="这里暂时什么都没有"></el-empty>
          </el-main>
          <el-footer>
            <div class="footer">
              <div class="footleft">
                <div class="footleftone" v-if="isActivityActive(Number(route.query.ovTime))">
                  <count-down :endTime="Number(route.query.ovTime)" :callback="callback" endText="已经结束了"> </count-down>
                </div>
                <div class="footlefttwo">
                  <div class="childone">套餐一口价：</div>
                  <div class="childtwo">¥{{ packageDetail.fixedPrice }}</div>
                </div>
              </div>
              <div class="footright">
                <!-- <div class="cancle" @click="$router.push({ path: '/combo-price/index' })">
                  <div class="text">取消</div>
                </div> -->
                <div
                  class="sure"
                  @click="
                    () => {
                      dialogVisible = true;
                      getCustomListFun();
                    }
                  "
                >
                  <div class="text">创建预算报价模板</div>
                </div>
              </div>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </div>
  </div>

  <!-- 选择关联客户 -->
  <el-dialog v-model="dialogVisible" width="800" modal-class="following-custom-dialog" :show-close="false">
    <div class="dialog-content">
      <div class="headerradio">
        <div>创建/保存预算报价模板</div>
        <!-- <el-radio-group v-model="dialogradio">
          <el-radio value="1" size="large">创建预算报价模板</el-radio>
          <el-radio value="2" size="large">保存到预算报价模板</el-radio>
        </el-radio-group> -->
      </div>
      <!-- <div v-if="dialogradio == 2">
        <div class="taocan">
          <p style="margin-bottom: 8px">请选择套餐预算模板</p>
        </div>
        <div>
          <div class="custom_list">
            <template v-if="customList.length > 0">
              <div v-for="(i, v) in budgetarrylist" :key="v" @click="changebudget(i, v)">
                <div class="custom_item">
                  <div class="item_icon">
                    <img :src="require('@/assets/images/select.png')" width="16" v-if="i.budgetselect == true" />
                    <img :src="require('@/assets/images/unselect.png')" width="16" v-if="i.budgetselect == false" />
                  </div>
                  <div class="item_head">
                    <div class="textleft">清单预算模版</div>
                    <div class="textright">（包含空间{{ i.spaceNameList.length }}个）丨 {{ i.spaceNameList.join("/") }}</div>
                  </div>
                  <div class="item_content">
                    <div class="item_contentone">
                      <div class="textleft">{{ i.customerName }} 丨</div>
                    </div>
                    <div class="item_contenttwo">
                      <div class="textright">电话：{{ i.customerMobileCode }}</div>
                    </div>
                    <div class="item_contentthree">
                      <div class="textright">地址： {{ i.customerAddress }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <el-empty v-else description="暂无数据" />
          </div>
        </div>
      </div> -->

      <div v-if="dialogradio == 1">
        <div>
          <p style="margin-bottom: 8px">请选择关联客户</p>
          <div class="search-wrap">
            <el-input v-model="customKey" clearable placeholder="输入业主名称/房屋地址/手机号" @change="getCustomListFun">
            </el-input>
            <!-- <el-tooltip
              content="跳转到CRM管理页面录入客户信息"
              placement="bottom"
              effect="light"
              popper-class="following-custom-popper"
            >
              <el-button class="add-custom" type="primary" @click="toPath('/crm/client/client-manager')">新增客户</el-button>
            </el-tooltip> -->
          </div>
        </div>

        <div class="custom-list mt4">
          <template v-if="customList.length > 0">
            <div
              class="custom-item"
              :class="{ active: currObj.customerId === item.customerId }"
              v-for="(item, index) in customList"
              :key="index"
              @click="selectcurrObj(item)"
            >
              <h3 class="mb10">
                <b>{{ item.receivingName }}</b
                ><el-divider direction="vertical" /><i>{{ "-" }}</i>
              </h3>
              <p class="mb10 f12">电话：{{ item.receivingMobile }}</p>
              <p class="f12">地址：{{ item.address }}</p>
              <div class="active-icon" v-if="currObj.customerId === item.customerId">
                <el-icon><CircleCheckFilled /></el-icon>
              </div>
            </div>
          </template>
          <el-empty v-else description="暂无数据" />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="info"
          @click="
            () => {
              dialogVisible = false;
              currObj = { customerId: null };
              hasFalseIconSelect = !hasFalseIconSelect;
              initbudgetarrylist();
            }
          "
          >取消</el-button
        >
        <!-- <el-button
          v-if="dialogradio == 1"
          type="primary"
          :disabled="!currObj.customerId"
          @click="
            () => {
              dialogVisible = false;
              crateBudgetQuotationFun();
            }
          "
          >确认创建</el-button
        > -->
        <el-button
          type="primary"
          @click="
            () => {
              dialogVisible = false;
              createbudget();
            }
          "
          >确认{{ showfootname }}</el-button
        >
      </div>
    </template>
  </el-dialog>
  <tagFilterDrawer v-model="tagFilterFlag" :categoryfatherList="categoryfatherList" @confirm="confirmFun" />

  <!-- 商品规格选择 -->
  <marqueSelectModel
    v-if="marqueSelectFlag"
    v-model="marqueSelectFlag"
    :product="currentProduct"
    :_time="_time"
    :isHidePrice="packageDetail.isHidePrice"
    @confirm="confirmFungg"
    :showremark="auxiliaryList.length > 0 ? true : false"
  />
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCustomList, crateBudgetQuotation } from "@/apis/quote-price/following";
import { useRouter, useRoute } from "vue-router";
import {
  gettemplateById,
  getQuotaProductVOList,
  quotaProductConditionList,
  selectbudgetbytem,
  importBudget,
  getTemplateByCombine,
  getCustomerListWithSort,
  saveTempCustomerRemark
} from "@/apis/combo-price/index";
import { pageByCombine } from "@/apis/quote-price/following";
import countDown from "./components/countDown.vue";
import useManageStore from "@/store/modules/manage";
import tagFilterDrawer from "./components/tagFilterDrawer.vue";
import searchBox from "@/views/home/components/search";
import marqueSelectModel from "./components/marqueSelectModel.vue";
import RemarkEditor from "@/components/RemarkEditor";

const currentSpace = ref({});
const currentQuota = ref({});
const currentProduct = ref({});
const route = useRoute();
const router = useRouter();
const preselection = ref(null);
const manageStore = useManageStore();
const tagFilterFlag = ref(false);
const marqueSelectFlag = ref(false);
const isSelected = ref(false);
const packageDetail = ref({});
const list = ref([]);
const dialogradio = ref("1");
// 分类Id
const classifyIndex = ref("");
const searchkey = ref("");
//选择关联客户弹窗
const dialogVisible = ref(false);
const customKey = ref("");
//关联客户列表
const customList = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]);
const currObj = ref({ customerId: null });
const mianList = ref([]);
const auxiliaryList = ref([]);
const quotaType = ref("1");
const brandId = ref();
const brandIdvalue = ref({});
const budgetarrylist = ref([]);
const hasFalseIconSelect = ref(false);
const valueobj = ref({});
const categoryfatherList = ref([]);
const templateName = ref("");
const showCondition = ref([]);
const auxiliaryNum = ref("");
const showcaozuo = ref(true);
const showzhufu = ref(["1", "2"]);
const showfootname = ref("创建/保存");
const _time = ref(null);
onMounted(() => {
  //生成临时code-时间戳
  _time.value = new Date().getTime();

  getdetails();
});

const selected = ref({
  templateId: route.query.templateId,
  budgetId: "",
  ysId: "",
  spaceList: []
});

watch(
  selected,
  newItems => {
    if (newItems) {
      currentSpace.value.quotaList?.forEach(item => {
        let space = selected.value.spaceList.find(v => v.spaceId == item.spaceId);
        if (space) {
          let quota = space.quotaDTOS.find(i => i.quotaId == item.quotaId);
          if (quota) {
            item.qiantotle = quota["productInfos"].length;
          }
        }
      });
    }
  },
  { deep: true }
);
//选中卡片 type  toggle-选中取消互相切换   checked-选中
const changetab = (product, type = "toggle") => {
  let space = selected.value.spaceList.find(item => item.spaceId == currentSpace.value.spaceId);
  if (!space) {
    selected.value.spaceList.push({
      spaceId: currentSpace.value.spaceId,
      quotaDTOS: [{ quotaId: currentQuota.value.quotaId, productInfos: [product] }]
    });
    return;
  }

  let quota = space.quotaDTOS.find(item => item.quotaId == currentQuota.value.quotaId);
  if (!quota) {
    space.quotaDTOS.push({ quotaId: currentQuota.value.quotaId, productInfos: [product] });
    return;
  }
  const { businessSkuId } = product;
  const selectIndex = quota.productInfos.findIndex(item =>
    businessSkuId ? item.businessSkuId === businessSkuId : item.productId == product.productId
  );
  if (selectIndex !== -1) {
    type === "toggle" && quota.productInfos.splice(selectIndex, 1);
  } else {
    const isMainType = quotaType.value == 1;
    const checkedNum = isMainType ? currentQuota.value.mainProductCheckedNum : currentQuota.value.auxiliaryProductCheckedNum;
    const totalFn = isMainType ? getmainlisttotle : getauxiliarytotle;
    if (checkedNum == totalFn()) {
      if (isMainType) {
        ElMessage({ type: "info", message: "可选商品已勾选完请先取消操作" });
        return;
      }
    }
    if (!product.productType) {
      product.productType = quotaType.value;
    }
    quota.productInfos.push(product);
  }
};
//总价格求和
const pricetotle = () => {
  const totalSum = selected.value.spaceList.reduce((total, space) => {
    return (
      total +
      space.quotaDTOS.reduce((quotaTotal, quota) => {
        return (
          quotaTotal +
          quota.productInfos.reduce((productTotal, product) => {
            return productTotal + (parseFloat(product.businessLowestPrice) || 0) + (parseFloat(product.clinetRealPrice) || 0);
          }, 0)
        );
      }, 0)
    );
  }, 0);
  return parseFloat(totalSum);
};
const getquotatotle = () => {
  currentSpace.value.quotaList?.forEach(item => {
    item.qiantotle = 0;
  });
};
//获取主材选中数量
const getmainlisttotle = () => {
  return selected.value.spaceList
    .flatMap(space => space.quotaDTOS)
    .filter(quota => quota.quotaId === currentQuota.value.quotaId)
    .flatMap(quota => quota.productInfos)
    .filter(product => product.productType == 1).length;
};

//获取辅材选中数量
const getauxiliarytotle = () => {
  return selected.value.spaceList
    .flatMap(space => space.quotaDTOS)
    .filter(quota => quota.quotaId === currentQuota.value.quotaId)
    .flatMap(quota => quota.productInfos)
    .filter(product => product.productType == 2).length;
};
//选中状态判断
const isChecked = item => {
  const space = selected.value["spaceList"].find(space => space.spaceId === currentSpace.value.spaceId);
  if (!space) return false;
  const quota = space.quotaDTOS.find(quota => quota.quotaId === currentQuota.value.quotaId);
  if (!quota) return false;
  if (item.businessSkuId) {
    const product = quota.productInfos.find(product => product.businessSkuId === item.businessSkuId);
    if (!product) return false;
    return true;
  } else {
    const product = quota.productInfos.find(product => product.productId === item.productId);
    if (!product) return false;
    return true;
  }
};
const initbudgetarrylist = () => {
  budgetarrylist.value?.forEach(item => {
    item.budgetselect = true;
  });
};
//获取详情页信息
const getdetails = async () => {
  const { code, data } = await getTemplateByCombine(route.query.combineId);
  code == 200 && (packageDetail.value = data);

  console.log("这是详情数据===", packageDetail.value);
  currentSpace.value = packageDetail.value.spaceList[0]; //默认选中第一个空间
  currentQuota.value = currentSpace.value.quotaList[0]; //默认选中第一个页签

  if (route.query.spaceId) {
    const obj = packageDetail.value.spaceList?.find(o => o.spaceId === route.query.spaceId);
    console.log("默认选中的空间===", obj);
    if (obj) {
      currentSpace.value = obj; //默认选中第一个空间
      clickClassify(obj);
    }
  }

  //如果正常的定额tabs长度<=0，则默认选中个性化材料
  if (currentSpace.value.quotaList.length <= 0) {
    clickcurrentQuota(currentSpace.value?.spaceQuotationMaterialDTO, "DTO");
  }

  getProductList(currentQuota.value);
  getbudget();
  getquotatotle();
};
// 点击空间分类
const clickClassify = v => {
  currentSpace.value = v;
  currentQuota.value = v.quotaList[0] || { ...currentSpace.value.spaceQuotationMaterialDTO, tabsType: "DTO" };
  getbudget();
  getProductList(currentQuota.value);
};
//点击主材辅材 e  1-主材  2-辅材
const quotaTypechange = e => {
  console.log("111", e, currentQuota.value.productInfos);
  quotaType.value = e;
  if (currentQuota.value.tabsType) {
    //点击的是“个性化材料”
    mianList.value = [];
    auxiliaryList.value = [];
    if (e === "1") {
      mianList.value = currentQuota.value?.productInfos?.filter(item => item.productType === 1) || []; //主材
    } else if (e === "2") {
      auxiliaryList.value = currentQuota.value?.productInfos?.filter(item => item.productType === 2) || []; //辅材
    }
    currentQuota.value?.productInfos?.map(item => {
      changetab(item, "checked");
    });
  } else {
    getProductList(currentQuota.value);
  }
};
//点击顶部定额
const clickcurrentQuota = (e, type = "normal") => {
  currentQuota.value = e || {};
  if (type === "DTO") {
    // 个性化材料
    currentQuota.value.tabsType = "DTO"; //个性化材料的时候，添加判断标识 tabsType = "DTO"

    mianList.value = [];
    auxiliaryList.value = [];
    if (quotaType.value === "1") {
      mianList.value = e?.productInfos?.filter(item => item.productType === 1) || []; //主材
      mianList.value?.map(item => {
        changetab(item, "checked");
      });
    } else {
      auxiliaryList.value = e?.productInfos?.filter(item => item.productType === 2) || []; //辅材
      auxiliaryList.value?.map(item => {
        changetab(item, "checked");
      });
    }
    showzhufu.value = ["1", "2"];
    console.log("个性化材料", e);
  } else {
    e.auxiliaryProductShowType == null ? (showzhufu.value = ["1"]) : (showzhufu.value = ["1", "2"]);
    getProductList(currentQuota.value);
  }
};
//获取商品接口处理
const getProductList = async item => {
  auxiliaryList.value = [];
  mianList.value = [];
  let postData = new FormData();
  postData.append("productType", quotaType.value);

  //如果是主材
  if (quotaType.value == 1) {
    if (currentQuota.value?.tabsType === "DTO") {
      //个性化材料
      mianList.value = currentQuota.value?.productInfos?.filter(item => item.productType === 1) || []; //主材
      mianList.value?.map(item => {
        changetab(item, "checked");
      });
      return;
    }

    //判断主材是固定商品1还是条件组合2,接口分开调
    if (item?.mainProductShowType == 1) {
      showcaozuo.value = true;
      const { code, data } = await getQuotaProductVOList(item?.quotaId, postData);
      code === 200 && (mianList.value = data);
    } else {
      showcaozuo.value = false;
      const { code, data } = await quotaProductConditionList(item?.quotaId, quotaType.value);
      if (code === 200) {
        showCondition.value = data.voList.map(v => {
          return {
            categoryId: v?.categoryId,
            limitProductNum: v.limitProductNum
          };
        });
        console.log("分类列表111", data);
        categoryfatherList.value = data.voList;
        getlist(data.voList[0]);
      }
    }
  }
  //如果是辅材
  if (quotaType.value == 2) {
    if (currentQuota.value?.tabsType === "DTO") {
      //个性化材料
      auxiliaryList.value = currentQuota.value?.productInfos?.filter(item => item.productType === 2) || []; //辅材
      auxiliaryList.value?.map(item => {
        changetab(item, "checked");
      });
      return;
    }
    //判断辅材是固定商品1还是条件组合2,接口分开调
    if (item?.auxiliaryProductShowType == 1) {
      showcaozuo.value = true;
      const { code, data } = await getQuotaProductVOList(item?.quotaId, postData);
      code === 200 && (mianList.value = data);
    } else {
      showcaozuo.value = false;
      const { code, data } = await quotaProductConditionList(item?.quotaId, quotaType.value);
      if (code === 200) {
        showCondition.value = data.voList.map(v => {
          return {
            categoryId: v?.categoryId,
            limitProductNum: v.limitProductNum
          };
        });
        console.log("分类列表222", data, item);
        categoryfatherList.value = data.voList;
        getlist(data.voList[0]);
      }
    }
  }
};

//条件查询商品分页
const getlist = data => {
  const foundItem = showCondition.value.find(v => v?.categoryId === data?.categoryId);
  auxiliaryNum.value = foundItem ? foundItem.limitProductNum : 0;
  console.log("SSSSSSSSSSS11111111111");
  pageByCombine({
    quotaId: currentQuota.value.quotaId,
    categoryId: data?.categoryId || null,
    minPrice: data.minValue || null,
    maxPrice: data.maxValue || null,
    brandIds: data.brandIds || null,
    size: 9999,
    productType: quotaType.value
  }).then(res => {
    let arry = ref(res.data.list || []);
    arry.value?.forEach((item, index) => {
      const space = selected.value["spaceList"].find(space => space.spaceId === currentSpace.value.spaceId);
      if (!space) return;
      const quota = space.quotaDTOS.find(quota => quota.quotaId === currentQuota.value.quotaId);
      if (!quota) return;
      const product = quota.productInfos.find(product => product.productId === item.productId);
      if (product) {
        item.remark = product?.remark;
        item.businessSkuId = product.businessSkuId;
      }
    });
    auxiliaryList.value = arry.value;
  });
};
//分类标签确认
const confirmFun = item => {
  const foundItem = showCondition.value.find(v => v?.categoryId === item?.categoryId);
  auxiliaryNum.value = foundItem ? foundItem.limitProductNum : 0;
  console.log("SSSSSSSSSSS22222222", item);
  pageByCombine({
    quotaId: currentQuota.value.quotaId,
    categoryId: item?.categoryId || null,
    brandIds: item.brandIds || null,
    size: 9999,
    stastsIdsStr: item.sortTypeValue,
    productType: quotaType.value
  }).then(res => {
    auxiliaryList.value = res.data.list || [];
  });
};
const getdrawerlist = () => {
  getActivityTemplateList(templateName.value).then(res => {
    console.log(res);
  });
};
//查询套餐相关联的预算报价
const getbudget = () => {
  selectbudgetbytem({
    templateId: currentSpace.value.templateId
  }).then(res => {
    budgetarrylist.value = res.data.map(item => {
      return {
        ...item,
        budgetselect: true
      };
    });
  });
};
const isActivityActive = time => {
  const endDate = Date.parse("2099-12-30 23:59:59");
  return time < endDate;
};
// 倒计时
const countdown = endDate => {
  const countDownDate = new Date(endDate).getTime();
  // 更新倒计时并每秒更新显示
  const interval = setInterval(function () {
    const now = new Date().getTime();
    const distance = countDownDate - now;
    // 如果倒计时已经结束，清除interval
    if (distance < 0) {
      clearInterval(interval);
      console.log("倒计时已经结束");
      return;
    }
    // 计算时间差的天、小时、分钟和秒
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 输出到控制台或者页面显示
    console.log("倒计时：" + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ");
  }, 1000);
};
const toPath = url => {
  window.open(location.protocol + "//" + window.location.hostname + url, "_blank");
};
const toggleSelect = () => {
  isSelected.value = !isSelected.value;
};

//获取关联客户列表
const getCustomListFun = () => {
  showfootname.value = "创建/保存";
  getCustomerListWithSort(customKey.value, packageDetail.value.templateId, route.query.combineId).then(res => {
    if (res.code === 200) {
      customList.value = res.data;
    }
  });
};
const selectcurrObj = v => {
  currObj.value = v;
  v.creatBudgetStatus === 0 && (showfootname.value = "创建");
  v.creatBudgetStatus === 1 && (showfootname.value = "保存");
};
const changebudget = (i, v) => {
  hasFalseIconSelect.value = true;
  initbudgetarrylist();
  budgetarrylist.value[v].budgetselect = false;
  brandIdvalue.value = i;
};
//创建预算报价
const crateBudgetQuotationFun = () => {
  selected.value.ysId = currObj.value.customerId;
  importBudget(selected.value).then(res => {
    res.code === 200 && ElMessage({ message: "报价单创建成功", type: "success" });
  });
};
//创建预算报价
const createbudget = () => {
  let obj = {
    customerId: currObj.value.customerId,
    customerName: currObj.value.receivingName,
    customerMobileCode: currObj.value.receivingMobile,
    customerAddress: currObj.value.address,
    customerSummary: ""
  };
  selected.value.ysCustomerCreatReq = obj;
  selected.value.budgetId = brandIdvalue.value.budgetId;
  importBudget({ ...selected.value, combineId: route.query.combineId }).then(res => {
    res.code === 200 && ElMessage({ message: `报价单${showfootname.value}成功`, type: "success" });
  });
};
//选择商品规格
const openMarqueSelect = v => {
  valueobj.value = v;
  brandId.value = v.brandId;
  currentProduct.value = {
    ...v,
    id: v.productId,
    businessSkuId: v.businessSkuId
  };
  marqueSelectFlag.value = true;
};
//选择规格确认
const confirmFungg = (item, remark, skuObj) => {
  valueobj.value.remark = remark;
  valueobj.value.businessSkuId = item;
  valueobj.value.skuSpecification = skuObj?.skuProperties || "";
  saveTempCustomerRemark({
    code: _time.value,
    businessSkuId: valueobj.value.businessSkuId,
    templateId: packageDetail.value.templateId,
    remark: valueobj.value?.remark
  });
  marqueSelectFlag.value = false;
};
</script>

<style lang="scss">
.textleft {
  height: 24px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #3d3d3d;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.textright {
  height: 20px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #4e5969;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.following-custom-dialog .dialog-content .search-wrap .el-button {
  margin-left: 4px;
  width: 120px;
  height: 32px;
  background: #424e66;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  border-radius: 2px 2px 2px 2px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.following-custom-dialog {
  .dialog-content {
    .taocan {
      width: 126px;
      height: 24px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #3d3d3d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 18px;
    }
    .custom_list {
      .custom_item {
        position: relative; /* 为绝对定位的子元素提供基准 */
        cursor: pointer; /* 设置鼠标悬停时的光标样式 */
        height: 142px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #e5e8ef;
        margin-bottom: 18px;
        .item_icon {
          position: absolute; /* 使用绝对定位 */
          right: 27px; /* 距离父元素的右边缘27px */
          top: 78px; /* 距离父元素的顶部78px */
          bottom: 43px; /* 距离父元素的底部43px */
        }
        .item_head {
          padding-left: 20px;
          padding-right: 63px;
          height: 44px;
          background: #d9e1eb;
          border: 1px solid #e1e6ed;
          display: flex;
          align-items: center; /* 垂直居中（可选） */
        }
        .item_content {
          padding-left: 20px;
          .item_contentone {
            margin-top: 14px;
            display: flex;
            text-align: center;
            align-items: center;
          }
          .item_contenttwo {
            margin-top: 8px;
          }
        }
      }
    }
    .headerradio {
      padding-left: 20px;
      display: flex;
      align-items: center;
      height: 40px;
      background: #f5f7fa;
      border-radius: 0px 0px 0px 0px;
      margin-bottom: 20px;
    }
    height: 500px;
    overflow-y: auto;
    & > div > p {
      color: #3d3d3d;
      margin-bottom: 10px;
    }
    .search-wrap {
      display: flex;
      .el-button {
        margin-left: 4px;
      }
    }
    .add-custom.el-button:hover {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    }
    .custom-list {
      padding: 20px;
      border: 1px solid #e1e6ed;
      .custom-item {
        border: 1px solid #e1e6ed;
        padding: 16px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 4px;
        cursor: pointer;
        h3 {
          color: #1d2129;
          font-weight: normal;
          b {
            font-weight: normal;
          }
          i {
            font-style: normal;
            font-size: 12px;
          }
        }
        .active-icon {
          position: absolute;
          font-size: 20px;
          right: 36px;
          top: calc(50% - 10px);
        }
        &.active {
          border-color: transparent;
          background: #eef1f4;
          box-shadow: 0px 0px 8px 0px rgba(4, 54, 114, 0.2);
        }
      }
    }
  }
}
.following-custom-popper.el-popper {
  width: 144px;
  padding: 16px !important;
  color: black;
}
</style>

<style lang="scss" scoped>
:deep(.side) {
  border-radius: 10px 0 0 10px;
}
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
.quote-price-container {
  margin-top: 114px;
  height: calc(100vh - 120px);
  box-sizing: border-box;
  display: flex;
  :deep(.l-search) {
    & > div > span {
      font-size: 14px !important;
    }
  }
  :deep(.el-breadcrumb__inner) {
    color: #1d2129;
    font-weight: bold;
  }

  .content {
    width: 100%;
    padding: 20px 0px 0 20px;
    .side {
      width: 200px;
      padding-top: 20px;
      :deep(.menu-item) {
        &:first-of-type {
          display: none;
        }
      }
    }
    .aside-box {
      height: 100%;
      background: white;
      border-radius: 10px 10px 0 10px;
      width: 220px;
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      overflow-x: hidden;
      box-sizing: border-box;
      padding-top: 20px;
      .t {
        font-size: 18px;
        color: #3d3d3d;
        font-weight: 700;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        // width: 100%;
        padding: 0 20px !important;
      }
      .list {
        margin-top: 20px;
        .item {
          font-size: 14px;
          color: #86909c;
          // margin-top: 15px;
          text-indent: 20px;
          height: 32px;
          line-height: 32px;
        }
        .item:hover {
          color: #3d3d3d;
          background-color: #eef1f4;
        }
        .on {
          color: #3d3d3d;
          background-color: #eef1f4;
        }
      }
    }
    :deep(.el-container) {
      // box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      height: calc(100%);
      .el-aside {
        box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      }
      .el-main {
        border-radius: 0 10px 10px 0;
        padding: 0px 20px 0 20px;
        .search-wrap {
          background-color: white;
          padding: 10px 20px;
          position: sticky;
          top: -20px;
          width: 100%;
          box-sizing: border-box;
          z-index: 2;
        }
        .list-warp {
          & > div {
            display: grid;
            grid-template-columns: repeat(var(--num), 1fr);
          }
          .el-col {
            padding: 0 10px;
          }
        }
      }
    }
  }
  // 搜索结果列表
  .search-box {
    background: #ffffff;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    border-radius: 10px 10px 10px 10px;
    height: 72px;
    .search-list {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 20px;
      .li {
        background: #ffffff;
        margin-right: 16px;
        width: 217px;
        height: 32px;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
        border-radius: 4px 4px 4px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        .t {
          width: 179px;
          line-height: 22px;
          text-align: center;
          margin: 0 auto;
          color: #4e5969;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .active_li {
        background: #4e5969;
        .t {
          width: 179px;
          line-height: 22px;
          text-align: center;
          margin: 0 auto;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .li {
        background: #ffffff;
        margin-right: 16px;
        width: 217px;
        height: 32px;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
        border-radius: 4px 4px 4px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        .t {
          width: 179px;
          line-height: 22px;
          text-align: center;
          margin: 0 auto;
          color: #4e5969;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .active_li {
        background: #4e5969;
        .t {
          width: 179px;
          line-height: 22px;
          text-align: center;
          margin: 0 auto;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
}

.container {
  display: flex; /* 开启 Flexbox 布局 */
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 (可选) */
  padding: 20px 0 20px 0; /* 内边距可选 */
  cursor: pointer; /* 设置鼠标悬停时的光标样式 */
}

.left {
  display: flex;
  box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  .leftitem {
    width: 161px;
    height: 32px;
    background: #4e5969;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
      width: 28px;
      height: 22px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 22px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .unleftitem {
    width: 161px;
    height: 32px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    .untext {
      width: 28px;
      height: 22px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #4e5969;
      line-height: 22px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

.right {
  display: flex;
  .rightzuo {
    height: 22px;
    font-weight: 400;
    font-size: 14px;
    color: #86909c;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-right: 20px;
    span {
      font-family: "PingFang-Bold" !important;
    }
  }
  .rightyou {
    display: flex;
    .text {
      width: 113px;
      height: 22px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #213270;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
.el-footer {
  width: 100%;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15);
  border-radius: 0px 0px 0px 0px;
}
.card {
  cursor: pointer; /* 设置鼠标悬停时的光标样式 */
  margin-bottom: 20px;
  height: 200px;
  background: #ffffff;
  box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  width: 100%;
  background-color: white;
  .picture {
    width: 276px;
    height: 200px;
    overflow: hidden; /* 确保子元素不溢出父容器 */
    border-radius: 10px; /* 设置 `.picture` 的圆角，以便覆盖内部 img */
  }
  .picture img {
    width: 100%;
    height: 100%;
    border-radius: 10px; /* 同样为 img 设置圆角 */
    object-fit: cover; /* 确保持比例裁剪，防止变形 */
  }
  .card-right {
    flex: 1;
    width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      display: flex;
      padding: 16px 20px 20px 20px;
      justify-content: space-between; /* 左右对齐 */
      align-items: center; /* 垂直居中（可选） */
      .title {
        height: 24px;
        font-size: 16px;
        color: #3d3d3d;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .iconclick {
        cursor: pointer; /* 设置鼠标悬停时的光标样式 */
      }
    }
    .center {
      height: 50px;
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐（如果需要） */
      background: #ffffff;
      .content {
        width: calc(100% - 80px); /* 减少宽度，以显示 .center 的左右背景 */
        padding: 0px 21px;
        height: 100%;
        background: #f7f8fa;
        border-radius: 4px 4px 4px 4px;
        .content_item {
          height: 100%;
          display: flex;
          justify-content: start; /* 水平居中对齐 */
          align-items: center; /* 垂直居中对齐（如果需要） */
          .text {
            margin-right: 24px;
            height: 24px;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #86909c;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
    .remark {
      margin-top: 22px;
      width: 100%;
      box-sizing: border-box;
      height: 24px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #86909c;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: start; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐（如果需要） */
      background: #ffffff;
      padding-left: 21px;
    }
    .down {
      margin-bottom: 16px;
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: space-between; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐（如果需要） */
      background: #ffffff;
      .downleft {
        padding-left: 21px;
        width: 75px;
        height: 24px;
        font-family: DIN, DIN;
        font-weight: 700;
        font-size: 18px;
        color: #ff3333;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .downright {
        width: 143px;
        height: 24px;
        background: #4e5969;
        border-radius: 4px 4px 4px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        .text {
          width: 72px;
          height: 22px;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px; /* 确保有足够的高度以便于居中（可根据需要调整） */
  .footleft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .footleftone {
      width: 360px;
      height: 40px;
      background: #272636;
      border-radius: 10px 10px 10px 10px;
      margin-right: 20px;
    }
    .footlefttwo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 178px;
      height: 24px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #3d3d3d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      .childtwo {
        color: #ff3333;
      }
    }
  }
  .footright {
    display: flex;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-right: 20px;
    .cancle {
      cursor: pointer; /* 设置鼠标悬停时的光标样式 */
      display: flex;
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
      width: 140px;
      height: 36px;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      margin-right: 16px;
      .text {
        width: 28px;
        height: 22px;
        line-height: 22px;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1d2129;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    .sure {
      cursor: pointer; /* 设置鼠标悬停时的光标样式 */
      display: flex;
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
      width: 140px;
      height: 36px;
      background: #424e66;
      border-radius: 2px 2px 2px 2px;
      .text {
        width: 119px;
        height: 22px;
        line-height: 22px;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
